:root {
  --dock-item-hover-color: rgba(var(--config-accent-light-color-rgb), 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dock-item-hover-color: rgba(var(--config-accent-color-rgb), 0.2);
  }
}

.taskbar {
  .taskbar-bg-layer-1 {
    opacity: 0.3;
    filter: saturate(0);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='10' numOctaves='3' stitchTiles='stitch '/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: cover;
    border-radius: 15px;
  }

  .taskbar-bg-layer-2 {
    opacity: 0.8;
    background-color: var(--color-gray-100);
    border-radius: 15px;
  }

  &.temporal-only {
    --empty-rule: "delete me on use";
  }
}

.weg-separator {
  .horizontal & {
    &.weg-separator-1 {
      border-left: 1px solid var(--color-gray-400);
    }
    &.weg-separator-2 {
      border-right: 1px solid var(--color-gray-400);
    }
  }

  .vertical & {
    &.weg-separator-1 {
      border-top: 1px solid var(--color-gray-400);
    }
    &.weg-separator-2 {
      border-bottom: 1px solid var(--color-gray-400);
    }
  }
}

.weg-empty-state-label {
  white-space: nowrap;
  width: min-content;
  line-height: var(--config-item-size);
  vertical-align: middle;
  font-style: italic;
  color: var(--color-gray-400);
  margin: 0 calc(var(--config-padding) * 2);
}

.weg-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--config-item-size);
  height: var(--config-item-size);

  .bg-layer-1 {
    background-color: var(--color-gray-100);
    border-radius: 25%;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
  }

  .bg-layer-2 {
    border-radius: 25%;
    transition: background-color 0.2s ease-out;
  }

  &.media-session-container {
    &.media-session-container-horizontal {
      width: calc(var(--config-item-size) * 3 + var(--config-space-between-items) * 2);
    }
    &.media-session-container-vertical {
      height: calc(var(--config-item-size) * 3 + var(--config-space-between-items) * 2);
    }
  }

  &:hover {
    .bg-layer-2 {
      background-color: var(--dock-item-hover-color);
    }
  }

  &:active {
    .bg-layer-1 {
      filter: brightness(0.8);
    }

    .weg-item-icon {
      transform: scale(0.8);
    }
  }

  &:not(:active) {
    .bg-layer-1 {
      transition: filter 0.2s linear;
    }

    .weg-item-icon {
      transition: transform 0.2s linear;
    }
  }

  .weg-item-notification-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
    background-color: var(--config-accent-color);
    color: #efefef;
    height: 16px;
    min-width: 16px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
  }

  .weg-item-instance-counter-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(25%, 25%);
    background-color: var(--color-gray-400);
    color: var(--color-gray-100);
    height: 16px;
    min-width: 16px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
  }
}

.weg-item-icon {
  width: 70%;
  height: 70%;
  filter: drop-shadow(0px 0px 1px #0000009a);
  object-fit: contain;
  fill: var(--config-accent-lighter-color);

  &.weg-item-start-icon, &.weg-item-folder-icon {
    position: relative;
    filter: none;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      /* this is var present for any weg-item-icon, not only the start or folder icon */
      mask-image: var(--icon-url);
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
      mask-mode: luminance;
      background-color: var(--config-accent-light-color);
    }
  }
}

.weg-item-open-sign {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 6px;
  background-color: var(--color-gray-600);
  opacity: 0;
  transition-property: width, height, transform, opacity, background-color, border-radius;
  transition-duration: 0.2s;
  transition-timing-function: linear;

  .vertical & {
    transform: translateX(-50%);
  }

  .horizontal & {
    transform: translateY(-50%);
  }

  .top & {
    bottom: calc(100% + var(--config-padding) / 2);
  }

  .bottom & {
    top: calc(100% + var(--config-padding) / 2);
  }

  .left & {
    right: calc(100% + var(--config-padding) / 2);
  }

  .right & {
    left: calc(100% + var(--config-padding) / 2);
  }

  &.weg-item-open-sign-active {
    opacity: 1;
  }

  &.weg-item-open-sign-focused {
    background-color: var(--config-accent-color);

    .vertical & {
      height: 50%;
    }

    .horizontal & {
      width: 50%;
    }
  }
}

.weg-context-menu-container {
  padding: 3px;

  .menu-bg-layer-1 {
    background-color: var(--color-gray-100);
    border-radius: 10px;
  }

  .weg-context-menu {
    --empty-rule: "delete me on use";
  }

  .weg-context-menu-item-icon {
    width: 1em;
  }
}

.weg-item-preview-container {
  padding: 10px;
  border-radius: 10px;

  .preview-bg-layer-1 {
    background-color: var(--color-gray-100);
    border-radius: 10px;
  }

  .weg-item-preview-scrollbar {
    &:has(.weg-item-preview-thumbnail-disabled) {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
  }
}

@keyframes PreviewContainerAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.weg-item-preview-container-open,
.weg-context-menu-container-open,
.weg-item-preview-container-close,
.weg-context-menu-container-close {
  animation: PreviewContainerAnimation 0.2s linear forwards;
}

.weg-item-preview-container-close,
.weg-context-menu-container-close {
  animation-direction: reverse;
}

.weg-item-preview {
  padding: 6px 10px 10px 10px;
  border-radius: 10px;
}

.weg-item-preview-topbar {
  margin: 0 0 8px 0;

  .weg-item-preview-thumbnail-disabled & {
    margin: 0;
  }
}

.weg-item-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.weg-item-preview-close {
  --empty-rule: "delete me on use";
}

.weg-item-preview-image-container {
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
}

.weg-item-preview-image {
  --empty-rule: "delete me on use";
}

.weg-item-preview-spin {
  --empty-rule: "delete me on use";
}
